<template>
	<view class="container" style="height: 100%;">
		<cu-custom bgColor="bg-gradual-red" :isBack="false">
			<block slot="content">找到组织</block>
		</cu-custom>		
		<scroll-view scroll-y="true" style="padding-bottom: 100upx;">
			<view class="CenterBox">
				<view class="firTitle">我的</view>
				<view class="flex flex-wrap justify-between align-center">
					<view class="BoxList" @click="navTo('/pages/we/detail?id='+item.id)" v-for="(item,index) in tableList" :key="index">
						<image :src="$ComFunJS.ImgFile(item.cover)" mode="aspectFill" class="imgBox"></image>
						<view class="contentBox">
							<view class="title">{{item.name}}</view>
							<view class="flex justify-between align-center">
								<view class="desc">{{item.channel}}</view>
							</view>
						</view>
					</view>
					<view class="BoxList flex flex-direction align-center justify-center" @click="navTo('/pages/we/add')">
						<view class="cuIcon-add icon text-grey"></view>
						<view class="text-gray">创建空间</view>
					</view>
				</view>			
			</view>
			<view class="CenterBox" v-if="false">
				<view class="firTitle">为你推荐</view>
				<view class="flex flex-wrap justify-between align-center">
					<view class="BoxList"  @click="navTo('/pages/we/detail?type=2')">
						<image src="../../static/errorImage.jpg" class="imgBox"></image>
						<view class="contentBox">
							<view class="title">我的我的</view>
							<view class="flex justify-between align-center">
								<view class="desc">我的我的我的我的我的我的我的我的我的我的我的我的</view>
							</view>
						</view>
					</view>
					<view class="BoxList"></view>
					<view class="BoxList"></view>
					<view class="BoxList flex flex-direction align-center justify-center">
						<view class="cuIcon-add icon text-grey"></view>
						<view class="text-gray">创建空间</view>
					</view>
				</view>			
			</view>			
		</scroll-view>

		<bar :current="1"></bar>
	</view>
</template>

<script>
	import {
	    mapState,
		mapMutations
	} from 'vuex'; 	
	export default {
        computed: {
			...mapState(['hasLogin'])
		},
		data() {
			return {
				tableList:[]
			};
		},
		onLoad(){

		},
		onShow() {
			setTimeout(()=>{
				if(!this.hasLogin){
					this.navTo('/pages/public/login')
				}		
				this.getList()
			},300)
		},
		methods: {
			navTo(url){
				uni.navigateTo({
					url: url
				})
			},
			getList(){
				this.$ComFunJS.ajax({
					url:'/addons/cms/api/mygroup',
					method: 'get',
					success: (res) => {
						this.tableList = res;
					}
				})
			}
		},

	}
</script>

<style lang="scss" >
	page{
		height: 100%;
		background: #FFFFFF;
	}
	.CenterBox{
		padding: 30upx;
		box-sizing: border-box;
		.firTitle{
			font-size: 36upx;
			color: #333333;
			font-weight: 500;
			font-family:PingFang;
			margin-bottom:30upx;
		}
	}
	.BoxList{
		width: 46%;
		height: 380upx;
		background: #FFFFFF;
		box-shadow:0px 0px 20upx 0px rgba(0,0,0,0.2);
		border-radius: 5px;
		margin-bottom: 40upx;
		overflow: hidden;
		.imgBox{
			width: 100%;
			height: 240upx;
		}
		.icon{
			font-size: 40upx;
		}
		.contentBox{
			padding: 20upx;
			box-sizing: border-box;
			.title{
				font-size: 26upx;
				color: #333333;
			}
			.desc{
				width: 100%;
				font-size: 24upx;
				color: #8799a3;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
</style>
